<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文华兄弟瓦</title>

    <style>

          .wrap{
    display: block;
    content: '';
    background: url(https://game.gtimg.cn/images/val/act/a20230801download/m-bg.jpg) no-repeat center top / 100%;
    height: 100rem;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    }
        .c1 {
    background: url(https://game.gtimg.cn/images/val/act/a20230801download/m-index-slogan.png) no-repeat center top / 100%;
    width: 40rem;
    height: 8rem;
    margin: 0 auto;
    transform: translate(0.1rem, 0);
    }

        /* 美化登录按钮 */
        .login-btn {
            display: inline-block;
            padding: 1rem 2rem;
            font-size: 1rem;
            color: white;
            background: linear-gradient(45deg, #ff6b6b, #f7a8b8); /* 渐变背景 */
            border-radius: 5px;
            text-align: center;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* 鼠标悬停时效果 */
        .login-btn:hover {
            transform: translateY(-5px); /* 上浮效果 */
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* 阴影变强 */
        }

        .register-btn {
            display: inline-block;
            padding: 1rem 2rem;
            font-size: 1rem;
            color: #333;
            background: #e0e0e0;
            border-radius: 5px;
            margin-left: 1rem;
            text-align: center;
            text-decoration: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .register-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }


    </style>


</head>
<body>
     <div class="wrap">
         <div>
             <h1 class="c1"></h1>
             <h1 style="text-align : center; color:red;font-size:6rem">文华兄弟瓦</h1>
         </div>
         <div style="padding-top: 56px;margin:auto ">
             <div style= "width: 30rem;margin:auto ;background-image: url('https://www.qiyou.cn/qy_wordpress/wp-content/uploads/2024/04/image-4142-1024x576.png'); background-size: cover;">
                 <div style="text-align:right;">
                     <a  class="login-btn" href="~~~">登录</a>
                     <a class='register-btn' href="@@@">注册</a>
                 </div>
                 <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto;">
                    <form method="post" action="/man/">
                        {% csrf_token %}
                        <div style="margin:auto;padding:10px;">
                            <input style="height:2.5rem;" name="account" placeholder="用户名">
                        </div>
                        <div style="margin:auto;padding:10px;">
                            <input style="height:2.5rem;" name="password" placeholder="密码">
                        </div>
                        <div style="color:red">
                            <a href="333">忘记密码？</a><span>{{error}}</span>
                        </div>
                        <div style="padding-left:10px;color:red;">
                            <input  type="checkbox">你是否同意<a href="@@@@">用户协议</a>
                        </div>
                        <div style="margin-top: 10px; width: 100%;">
                            <input style="height: 2.5rem; width: 100%;" type="submit" value="登录" name="666">
                        </div>
                    </form>
                 </div>
             </div>
         </div>
     </div>


</body>
</html>